<template>
  <div class="editprofile">
    <span class="tops">编辑个人信息</span>
    <div class="profile">
      <div class="leftprofile">
        <div class="profile-item">
          <span>昵称：</span>
          <el-input size="mini" v-model="nickname"></el-input>
        </div>
        <div class="profile-item">
          <span>介绍：</span>
          <el-input 
            size="mini"
            v-model="signature"
            maxlength="300"
            show-word-limit
            type="textarea"
          ></el-input>
        </div>
         <div class="profile-item">
          <span>性别：</span>
            <el-radio v-model="gender" label="0">保密</el-radio>
            <el-radio v-model="gender" label="1">男</el-radio>
            <el-radio v-model="gender" label="2">女</el-radio>
          <!-- <el-input size="mini"></el-input> -->
        </div>
        <div class="profile-item">
          <span>生日：</span>
          <el-date-picker
            v-model="birthday"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="timestamp"
            size="mini">
          </el-date-picker>
        </div>
        <div class="profile-item">
          <span>地区：</span>
          <v-distpicker hide-area @province="getProvince" @city="getCity"></v-distpicker>
        </div>
        <div style="display:flex;justify-content:center">
          <div class="submit" style="background-color:var(--netease-color);color:#fff;border-color:var(--netease-color)"  @click="submitProfile">保  存</div>
          <div class="submit" @click="back">取  消</div>
        </div>
        
      </div>
      <div class="rightprofile">
          <img :src="avatarUrl">
        
        <div style="width:100%;display:flex;justify-content:center" @click="changeImg">
          <div class="submit" style="margin-top:20px">修改头像</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {SimpleDataFormat} from 'common/filter'
import VDistpicker from 'v-distpicker'
import {request} from 'network/request'
export default {
  name:"EditProfile",
  data(){
    return {
      header:{'Content-Type':'multipart/form-data'},
      nickname:null,
      signature:null,
      gender:null,
      birthday:null,
      province:null,
      city:null,
      avatarUrl:null,
      formData:null
    }
  },
  computed:{
    // All(){
    //   this.nickname = this.$store.state.profile.profile.nickname
    //   this.signature=this.$store.state.profile.profile.signature
    //   this.gender=this.$store.state.profile.profile.gender+''
    //   this.birthday=this.$store.state.profile.profile.birthday
    //   this.avatarUrl = this.$store.state.profile.profile.avatarUrl
    // }
  },
  components:{
    VDistpicker
  },
  methods:{
    initialize(){
      // console.log(this.$store.state.profile.profile)
      
      // this.signature=this.$store.state.profile.profile.signature
      // this.gender=this.$store.state.profile.profile.gender+''
      // this.birthday=this.$store.state.profile.profile.birthday
      // this.avatarUrl = this.$store.state.profile.profile.avatarUrl
    },
    getProvince(p){
      this.province = p.code
    },
    getCity(c){
      this.city = c.code
    },
    async submitProfile(){
      const data = await request("GET",'user/update',
        {gender:this.gender,
        birthday:this.birthday,
        nickname:this.nickname,
        province:this.province,
        city:this.city,
        signature:this.signature})
      if(data.code === 200){
        this.$message.success({
          type:'success',
          message:'保存成功！',
          duration:2000
        })
         
      }else{
        this.$message.success({
          type:'error',
          message:'修改失败！',
          duration:2000
        })}
    },
    back(){
      this.$router.go(-1)
    },  
    changeImg(){
      this.$message.warning('修改头像功能未开放！')
    }
    // handleAvatarSuccess(res,file){
    //   console.log('asd')
    //   this.formData = new FormData()
    //   this.formData.append('imgFile', file)
    //   this.avatarUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file){
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isLt2M;
    // }
  },
  filters:{
    SimpleDataFormat
  },
  // computed:{
  //   profile(){
  //     return 
  //   },
    // nickname(){
    //   this.nickname = this.profile.nickname
    //   return this.nickname
    // }
  // },
  created(){
    setTimeout(() => {
      this.nickname = this.$store.state.profile.profile.nickname
      this.signature=this.$store.state.profile.profile.signature
      this.gender=this.$store.state.profile.profile.gender+''
      this.birthday=this.$store.state.profile.profile.birthday
      this.avatarUrl = this.$store.state.profile.profile.avatarUrl
    }, 500);
  }
}
</script>

<style scoped>
  .editprofile{
    height: 500px;
    margin-top: 15px;
  }
  .tops{
    color: rgb(55,55,55);
    margin-top: 10px;
    font-weight: 600;
    font-size: 20px;
  }
  .profile{
    display: flex;
    margin-top: 25px;
  }
  .profile-item{
    display: flex;
    width: 450px;
    align-items: center;
    margin-bottom: 20px;
  }
  .profile-item span{
    width: 50px;
    font-size: 12px;
  }
  ::v-deep .distpicker-address-wrapper select{
    padding:3px;
    height:30px;
    font-size: 13px;
  }
  .submit{
    text-align: center;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color:#fff;
    border-radius: 30px;
    margin:0 10px;
    color:rgb(55,55,55);
    cursor:pointer;
    border:1px solid rgb(216,216,216);
    font-size: 14px;
  }
  .rightprofile{
    margin-left:80px
  }
  .rightprofile img{
    width: 150px;
    height: 150px;
    /* border: 1px solid rgb(222,216,216); */
    border-radius: 3px;
  }
</style>